<template>
  <div v-if="item.err" class="easy-container info p-x-16">
    {{ item.err }}
  </div>
  <div v-else class="easy-container">
    <div class="flex content-space-between">
      <div class="info">{{ item.desc }}</div>
      <timeago2 :date-time="item.created_at" />
    </div>
    <router-link :to="item.title_path" class="block title f-18 primary-hover-color">
      {{ item.title }}
    </router-link>
    <template v-if="item.content">
      <router-link
        :to="`/users/${avatarUser.id}`"
        class="inline-flex align-items-center hover-underline-box"
      >
        <el-avatar :src="avatarUser.avatar" :size="30" />
        <span class="title link hover-underline m-l-10">{{ avatarUser.nickname }}</span>
      </router-link>
      <router-link :to="item.content_path" class="line3 indent-2">
        {{ $va.plainText(item.content ) }}
      </router-link>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'component-activities-list-item-v2',
  props: {
    item: Object,
  },
  computed: {
    ...mapState({ user: 'showingUser' }),
    avatarUser() {
      return this.item.user || this.user;
    },
  },
};
</script>

<style></style>
